<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>杭州</title>
    <link rel="stylesheet" type="text/css" href="https://gitee.com/xiaoyanxyz/xy/raw/master/css.css">
    <style>
        /* 创建名为 box4 的弹性容器 */
        .box4 {
            display: flex;
            width: 100%;
            margin: 10px 0;
            padding: 5px;
            background-color: transparent;
            flex-direction:column ;
        }
    </style>
</head>
<body>
<nav class="navbar">
      <div class="navbar-container container">
          <input type="checkbox" name="" id="">
          <div class="hamburger-lines">
              <span class="line line1"></span>
              <span class="line line2"></span>
              <span class="line line3"></span>
          </div>
          <ul class="menu-items">
              <li><a href="#" onclick="showContent('hz1'); return false;">首页</a></li>
              <li><a href="#" onclick="showContent('hz2'); return false;">历史底蕴</a></li>
              <li><a href="#" onclick="showContent('hz3'); return false;">产业发展</a></li>
          <!--<li><a href=" "> </a></li>-->
          </ul>
          <h1 class="logo">杭州</h1>
      </div>
  </nav>
<div class="main-container">
 <div id="hz1" class="content">
   <div class="box1">
    <div class="box1">
     <div class="slider-container">
        <div class="slider">
            <div class="slide">
                    <img src="https://pic1.imgdb.cn/item/684646cd58cb8da5c83af93d.jpg">
                <div class="caption"></div>
            </div>
            <div class="slide">
                    <img src="https://pic1.imgdb.cn/item/684646cc58cb8da5c83af939.jpg">
                <div class="caption"></div>
            </div>
            <div class="slide">
                    <img src="https://pic1.imgdb.cn/item/684646cc58cb8da5c83af93c.jpg">
                <div class="caption"></div>
            </div>
            <div class="slide">
                    <img src="https://pic1.imgdb.cn/item/684646cd58cb8da5c83af93e.jpg">
                <div class="caption"></div>
            </div>
            <div class="slide">
                    <img src="https://pic1.imgdb.cn/item/684646cb58cb8da5c83af934.jpg">
                <div class="caption"></div>
            </div>
            <div class="slide">
                    <img src="https://pic1.imgdb.cn/item/684646cb58cb8da5c83af935.jpg">
                <div class="caption"></div>
            </div>
        </div>
        <div class="prev" onclick="prevSlide()">&#10094;</div>
        <div class="next" onclick="nextSlide()">&#10095;</div>
     </div>
    </div>
      <div class="box2">
         <div class="box3">
          <div class="box4">
             <h2>杭州市</h2> 
             <p>杭州是浙江省省会和经济、文化、科教中心，长江三角洲中心城市，重要的风景旅游城市，首批国家历史文化名城。杭州市辖上城、拱墅、西湖、滨江、萧山、余杭、临平、钱塘、富阳、临安10个区，2个县，代管1个县级市。全市土地面积16850平方千米（根据第二次土地利用调查），其中市区面积8289平方千米。</p>
          </div>
          <div class="box4">
             <h2>自然人文</h2>
             <p>杭州地处长江三角洲南翼、杭州湾西端，是“丝绸之路经济带”和“21世纪海上丝绸之路”的延伸交点和“网上丝绸之路”战略枢纽城市。杭州山水相依、湖城合璧，江、河、湖、海、溪五水共导，风景如画，堪称“人间天堂”。拥有中国南部沿海地区最大的水库——新安江水库（又名千岛湖），世界上最长的人工运河——京杭大运河，以大涌潮闻名的钱塘江穿城而过。</p>
          </div>
          <div class="box4">
            <h2>名优特产</h2>
            <p>杭州境内土地肥沃，特产众多。良渚出土的距今4700年的丝织物揭示了杭州丝绸的历史之久，唐代大诗人白居易“红袖织绫夸柿蒂，青旗沽酒趁梨花”的诗句又道出了杭州丝绸的水准之高。现今生产绸、缎、绵、纺、绉、绫、罗等14个大类200多个品种，图景新颖，层次分明，栩栩如生，远销世界100多个国家和地区；杭州“东坡肉”，因苏东坡而命名，具有色泽红润、香味浓郁、肥而不腻、烂而不糜、味纯而嫩等特点；西湖龙井茶、王星记扇子、张小泉剪刀、致中和五加皮、临安山核桃等丰富多彩的地方特产散发着浓郁的杭州风情。</p>
          </div>
         </div>
         <div class="box3">
          <h2>特色文旅</h2>
           <div class="box4">
             <a href="http://baike.baidu.com/l/EXCNPqd8?bk_share=copy&fr=copy">
             <img src="https://pic1.imgdb.cn/item/6846611858cb8da5c83bdd7d.jpg" alt="南屏晚钟">
             <h3 class="centre">南屏晚钟</h3>
             </a>
           </div>
           <div class="box4">
             <a href="http://baike.baidu.com/l/HlJVVSxl?bk_share=copy&fr=copy">
             <img src="https://pic1.imgdb.cn/item/684659bc58cb8da5c83bcca9.jpg" alt="雷峰夕照">
             <h3 class="centre">雷峰夕照</h3>
             </a>
           </div>
           <div class="box4">
             <a href="http://baike.baidu.com/l/S9PCqVSg?bk_share=copy&fr=copy">
             <img src="https://pic1.imgdb.cn/item/684659b858cb8da5c83bcc8e.jpg" alt="曲院风荷">
             <h3 class="centre">曲院风荷</h3>
             </a>
           </div>
           <div class="box4">
             <a href="http://baike.baidu.com/l/H6GNj6ox?bk_share=copy&fr=copy">
             <img src="https://pic1.imgdb.cn/item/68465e8358cb8da5c83bd7aa.jpg" alt="苏堤春晓">
             <h3 class="centre">苏堤春晓</h3>
             </a>
           </div>
           <div class="box4">
             <a href="http://baike.baidu.com/l/CawjExSt?bk_share=copy&fr=copy">
             <img src="https://pic1.imgdb.cn/item/68465fed58cb8da5c83bd7fa.jpg" alt="三潭印月">
             <h3 class="centre">三潭印月</h3>
             </a>
           </div>
           <div class="box1">
           <a href="#">
           <img src="https://pic1.imgdb.cn/item/6846601c58cb8da5c83bd805.jpg" alt="这么近那么美，周末到河北">
           </a>
           </div>
         </div>
      </div>
      <hr>
      <p class="centre">Copyright ©2025.6.9 周HOMO、小研Y吖- All Rights Reserved.</p>
   </div>
 </div>
 <div id="hz2" class="content">
   <div class="box1">
   <h1 class="centre">历史底蕴</h1>
     <div class="box2">
       <div class="box3">
         <div class="box4">
           <h2>历史沿革</h2>
           <p>杭州是华夏文明的发祥地、中国著名的七大古都之一，以“东南名郡”著称于世。跨湖桥遗址的发掘显示，早在8000多年前，就有人类在此繁衍生息。距今5000多年前的良渚文化被称为“中华文明的曙光”。自秦时(公元前222年)设县治以来，已有2200多年历史。隋开皇九年(589年)废钱唐郡，置杭州，杭州之名首次在历史上出现。五代吴越国(907-978年)和南宋王朝(1138-1279年)两代建都杭州。民国元年，原钱塘、仁和县并置杭县。民国16年，划杭县城区等地设杭州市，杭州置市始此。1949年5月3日，杭州解放，从此揭开了杭州发展的历史新篇章。</p>
         </div>
       </div>
       <div class="box3">
         <div class="box4">
           <h2>文化内涵</h2>
           <p>杭州历史文化内涵博大精深。几千年来，以西湖文化、运河文化、钱塘江文化为代表的杭州文化，在开放中融合，在创新中发展。西湖文化采跨湖桥文化、良渚文化、吴越文化、南宋文化、明清文化、民国文化等各个时期文化之精华，集山水文化、园林文化、宗教文化、建筑文化、名人文化、民俗文化、丝绸文化、茶文化、饮食文化之广博，体现了西湖文化精致、和谐、典雅的特色;运河文化集水利文化、商贸文化、物产文化、水景文化、戏曲文化、庙会集市文化于一身，体现了杭州文化开放、兼容、庶俗的特色；钱塘江文化犹如滚滚钱塘潮，是杭州大气开放的象征和标志。</p>
         </div>
       </div>
     </div>
     <hr>
     <p class="centre">Copyright ©2025.6.9 周HOMO、小研Y吖- All Rights Reserved.</p>
   </div>
 </div>
 <div id="hz3" class="content">
<div class="box1">
   <h1 class="centre">产业发展</h1>
     <div class="box2">
       <div class="box3">
         <div class="box4">
           <h2>桐庐县“中国民营快递之乡”</h2>
           <img src="https://pic1.imgdb.cn/item/68467bae58cb8da5c83c7e61.jpg">
           <p>桐庐县，隶属浙江省杭州市，是名副其实的“中国民营快递之乡”。</p>
           <p>桐庐是“三通一达”的发源地。20世纪90年代，桐庐人聂腾飞带领村里年轻人走出大山，创办了申通快递，随后韵达速递、圆通速递、中通快递等桐庐籍快递企业相继诞生。从最初骑着自行车往来运营上海和杭州之间的报关急件直送业务，到如今成为中国快递业的半壁江山，桐庐的快递产业经历了从无到有、从小到大的飞速发展。</p>
         </div>
       </div>
       <div class="box3">
         <div class="box4">
           <h2>余杭纺织</h2>
           <p>杭州余杭纺织业历史久远，早在秦汉时期就有了比较发达的织造业。经过多个世纪的发展，余杭纺织业，特别是家纺产业，已经取得了显著的成就。余杭家纺以其悠久的历史和得天独厚的区位优势，逐渐形成了纱线、织造、印染、成品及纺织机械、纺织软件等门类较全、配套协作的产业体系，并形成了专业化分工协作。余杭区被中国纺织工业协会和中国家纺协会授予“中国布艺名城”和“中国丝绸织造基地”的称号。</p>
         </div>
       </div>
       
     </div>
     <hr>
     <p class="centre">Copyright ©2025.6.9 周HOMO、小研Y吖- All Rights Reserved.</p>
   </div>
 </div>
</div>

<script>
function showContent(id) {
  // 获取所有内容块
  const contents = document.getElementsByClassName('content');  
  // 遍历所有内容块，隐藏它们
  for (let i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }  
  // 显示指定ID的内容块
  document.getElementById(id).style.display = 'block';
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
  // 初始隐藏所有内容
  const contents = document.getElementsByClassName('content');
  for (let i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }
  // 显示第一个内容
  showContent('hz1');
});
const slides = document.querySelectorAll('.slide');
        let currentSlide = 0;
        let slideInterval;
        const sliderContainer = document.querySelector('.slider-container');
        function autoSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlide();
        }
        function prevSlide() {
            clearInterval(slideInterval);
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            updateSlide();
            startSlideInterval();
        }
        function nextSlide() {
            clearInterval(slideInterval);
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlide();
            startSlideInterval();
        }
        function updateSlide() {
            const slider = document.querySelector('.slider');
            const offset = -currentSlide * 100;
            slider.style.transform = `translateX(${offset}%)`;
        }
        // 自动切换定时器函数
        function startSlideInterval() {
         //↓自动切换图片时间，1000＝1秒
           slideInterval = setInterval(autoSlide, 3000);
        }
        sliderContainer.addEventListener('mouseenter', () => {
            clearInterval(slideInterval);
        });
        sliderContainer.addEventListener('mouseleave', () => {
            startSlideInterval();
        });
        startSlideInterval();
</script>
</body>
</html>